<template>
	<eui-popup ref="CustAddressPopup" :type="type" :animation="false" background-color="#fff" :mask-click="false">
		<view class="popup-content">
			<view class="popup-title flex just-between">
				<view style="font-weight: bold;">
					{{ title }}
				</view>
				<bcm-close-btn @click="close"></bcm-close-btn>
			</view>
			<view
				style="padding-left: 30rpx;height: 50vh;color: #6C6C6C;background-color:#fff;padding-top: 24rpx;padding-right: 36rpx;box-sizing: border-box;font-size: 32rpx;line-height: 40rpx;"> 
				<view class="flex align-center just-between">
					<view style="flex: 1;font-size: 32rpx;line-height: 40rpx;">{{ scope[addressKey] }}</view>
					<view style="width:70rpx;height: 70rpx;border-radius: 70rpx;background:#EDEDED;margin-left: 6rpx;"
						class="flex align-center just-center" @click="toMap" v-if="scope[addressKey]">
						<image src="@/static/img/bcmIcons/loca1.png" style="height: 42rpx;width: 42rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</eui-popup>
</template>
<script>
import BcmCloseBtn from '../../components/BcmCloseBtn.vue';

export default {
	name: "CustAddressPopup",
	props: {
		scope: {
			type: Object,
			default: {}
		},
		type: {
			type: String,
			default: 'bottom'
		},
		show: {
			type: Boolean,
			default: false
		},
		addressKey: {
			type: String,
			default: 'consigneeAddress'
		}, 
		title: {
			type: String,
			default: '顾客地址'
		}, 
	},
	components: {
		BcmCloseBtn
	},
	watch: {
		show: {
			handler(val) {
				// console.log(val, 'val')
				if (val) {
					this.$refs.CustAddressPopup.open('bottom');
				} else {
					this.close()
				}
			},
		}
	},
	data() {
		return {
			selfLocation: {
				latitude: 114.25,
				longitude: 30.63
			}
		}
	},
	methods: {
		close() {
			this.$refs.CustAddressPopup.close();
			this.$emit('close');
		},
		toMap() {
			uni.openLocation({
				latitude: Number(this.scope.consigneeLatitude),
				longitude: Number(this.scope.consigneeLongitude),
				name: this.address,
				address: this.scope[this.addressKey],
				success: function () {
					console.log('打开地图导航成功')
				},
				fail: function (error) {
					console.log(error, 'error')
				}
			})
		}
	}

}
</script>
<style lang="scss" scoped>
@import '@/static/font/enjoyicon/iconfont.css';
@import '../../common/common.css';

.popup-content {
	display: flex;
	flex-direction: column;
	padding: 0;
	width: 100%;
	background-color: #fff;
	height: 40vh;

	.popup-title {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 33rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 30rpx;
		padding-right: 36rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}
}

.bottom-1 {
	display: flex;
	justify-content: center;
	flex: 0 0 auto;
	height: 86rpx;
	padding: $uni-spacing-col-sm * 2 $uni-spacing-row-sm;
	background: $uni-bg-color;
	// border-top: 1rpx solid #979797;
}
</style>